<template>
  <div class="reader-container">
    <div class="reader-box">
      <swiper slides-per-view="auto" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange"
              @slide-prev-transition-start="handPrev" @slide-next-transition-start="handleNext" @touch-end="handleEnd">
        <swiper-slide v-for="(item, index) in imgList" :key="index">
          <div class="img-item" v-show="isDouble">
            <img :src="item[0] ?getImageUrl(item[0]) : getImageUrl('empty.jpg')" alt="" class="img-box"
                 @click="handleDouble('left')" :style="{ width: isDouble ? '50%' : '100%' }"/>
            <img :src="item[1]? getImageUrl(item[1]) : getImageUrl('empty.jpg')" alt="" class="img-box"
                 @click="handleDouble('right')" :style="{ width: isDouble ? '50%' : '100%' }" />
          </div>
          <div v-show="!isDouble" @click="handleDouble" class="img-item">
            <img :src="item ?getImageUrl(item): getImageUrl('empty.jpg')" alt="" class="img-box"
                 :style="{ width: isDouble ? '50%' : '100%' }"/>
          </div>
        </swiper-slide>
      </swiper>
    </div>

  </div>
</template>
<script setup>
import {Swiper, SwiperSlide} from 'swiper/vue'
import {getImageUrl} from '../src/utils'
import 'swiper/css'
import {nextTick, onMounted, ref} from 'vue'

let swiperel = null
const isDouble = ref(false)
const pageInfo = ref({
  total: 5,
  pageNum: 2
})
const imgList = ref(new Array(pageInfo.value.total).fill(0))

if (isDouble.value) {
  imgList.value = new Array(Math.ceil(pageInfo.value.total / 2)).fill(0).map((_, i) => [0, 0])
  imgList.value[0] = ['1.jpg', '2.jpg']
} else {
  imgList.value[0] = '1.jpg'
  imgList.value[1] = '2.jpg'
}

const onSwiper = (el) => {
  swiperel = el
}
const swiperIndex = ref(0)
const onSlideChange = (e) => {
  console.log(e.activeIndex)
  swiperIndex.value = e.activeIndex
  // console.log(e.activeIndex)
}

function handPrev() {
}

function handleNext(e) {

  getImageList()
}

const imgW = 1800
const imgH = 2483
const imgWeight = ref('')
const imgHeight = ref('')
onMounted(() => {
  setImageSize()
})


function sleep(time = 1000) {

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

async function getImageList() {
  await sleep()
  if (isDouble.value) {
    imgList.value[swiperIndex.value] = [`${swiperIndex.value * 2 + 1}.jpg`, `${swiperIndex.value * 2 + 2}.jpg`]
  } else {
    if ((swiperIndex.value % 2) === 0) {
      imgList.value[swiperIndex.value] = `${swiperIndex.value + 1}.jpg`
      imgList.value[swiperIndex.value + 1] = `${swiperIndex.value + 2}.jpg`
    }
  }


}

function handleEnd() {

  const length = imgList.value.flat(Infinity).length
  if (5 === pageInfo.value.total && swiperel.isEnd) {
    console.log('最后一页')
  }
  if (swiperel.isBeginning) {
    console.log('第一页')
  }
}

function setImageSize() {
  const height = document.documentElement.clientHeight
  const width = document.documentElement.clientWidth
  const tmpWeight = isDouble.value ? width / 2 : width
  const tmpHeight = isDouble.value ? height * 2 : height
  imgHeight.value = (tmpWeight / imgW) * imgH > height ? height + 'px' : (tmpWeight / imgW) * imgH + 'px'
  imgWeight.value = (tmpHeight / imgH) * imgW > width ? width + 'px' : (tmpHeight / imgH) * imgW + 'px'
}

window.addEventListener('resize', () => {
  setImageSize()
})


async function handleDouble(type) {
  isDouble.value = !isDouble.value
  if (isDouble.value) {
    const result = []
    for (let i = 0; i < Math.floor(imgList.value.length / 2); i = i + 1) {
      const currelement = imgList.value[i * 2]
      const nextEelment = imgList.value[i * 2 + 1]
      if (currelement && nextEelment) {
        result.push([currelement, nextEelment])
      } else if (currelement && !nextEelment) {
        result.push([currelement, 0])
      } else {
        result.push([0, 0])
      }
    }
    imgList.value = result
    const index = Math.floor(swiperIndex.value / 2)
    await nextTick()
    swiperel.slideTo(index, 0)
  } else {
    imgList.value = imgList.value.flat(Infinity)
    const doubleindex = swiperIndex.value * 2
    const index = type === 'left' ? doubleindex : doubleindex + 1
    await nextTick()
    swiperel.slideTo(index, 0)

  }
  setImageSize()
}
</script>

<style scoped>
.reader-container {
  height: 100vh;

  .reader-box {
    width: v-bind(imgWeight);
    margin: 0 auto;

    .img-item {
      display: flex;

      width: v-bind(imgWeight);
      height: v-bind(imgHeight);

      .img-box {
        cursor: pointer;
      }
    }
  }

}
</style>
